<style>
	.content {
		border: 1px solid#999;
		border-radius: 16px;
		margin-bottom: 20px;
		padding: 10px;
	}

	.listItem1 {
		flex: 1;
		margin: 10px;
		background: #fff;
		padding: 10px;
		border-radius: 16px;
		text-align: center;
	}

	.listItem1 div {
		text-align: center;
	}

	.listTitle {
		background-image: linear-gradient(to right, #3a3ef4, #3a3ef4);
		color: #fff;
		border-radius: 40px;
		padding: 6px 10px;
		margin: 10px 0;
	}
</style>
<template>
	<div>
		<div class="displayFlexBet bgfff pad10" style="margin-bottom: 10px;border-radius:8px">
			<div></div>
			<el-button @click="$refs.onlineMonitorSave.open()" icon="el-icon-plus" type="primary"
				size="mini">新增监测设备</el-button>
		</div>

		<div class="displayFlexBet pad10 bgfff color555" style="border-radius:8px">
			<div style="flex:3">排口</div>
			<div style="flex:3" class="">设备类型</div>
			<div style="flex:3" class="">监测设备名称</div>
			<div style="flex:3" class="">mn标识</div>
			<div style="flex:3" class="">pw标识</div>
			<div style="flex:3" class="">坐标</div>

			<div style="flex:1" class="">操作</div>
		</div>

		<div class="bgfff mt10" style="border-radius:8px">
			<div class="displayFlexBet pad10 color555 point" v-for="(item,index) in dataList" :key="index"
				style="border-bottom:1px solid#F8F7F9" @click="gotoEdit(item)">
				<div style="flex:3">{{item.outletName}}</div>
				<div style="flex:3" class="">{{item.monitorTypeStr}}</div>
				<div style="flex:3" class="textOver">{{item.monitorName}}</div>
				<div style="flex:3" class="textOver">{{item.mn}}</div>
				<div style="flex:3" class="textOver">{{item.pw}}</div>
				<div style="flex:3" class="textOver">[{{item.xCoords}},{{item.yCoords}},{{item.zCoords}}]</div>
				<div style="flex: 1;display: flex;align-items: flex-start;">
					<img src="@/assets/sIcon39.png" style="cursor: pointer;width: 18px;height: 18px;"
						@click.stop="deleteThis(item)">
					</img>
					
					<img src="@/assets/sIcon68.png" style="cursor: pointer;width: 15px;height: 18px;" class="ml20"
						@click.stop="$refs.onlineMonitorSave.open(item)">
					</img>
				</div>
			</div>
		</div>

		<div style="margin-top: 50px;">
			<el-pagination background layout="prev, pager, next" :total="totalNum" :page-size="params.pageSize"
				@current-change="handleCurrentChange" />
		</div>

		<!--新增基础信息-->
		<onlineMonitorSave ref="onlineMonitorSave" @refresh="getGasOutletBaseList()"></onlineMonitorSave>

	</div>
</template>

<script>
	import onlineMonitorSave from './components/onlineMonitorSave'
	let that

	export default {
		components: {
			onlineMonitorSave,
		},
		data() {
			return {
				params: {
					pageIndex: 1,
					pageSize: 10,
				},
				editData: '',
				outletId: '',
				visible1: true,
				dataList: [],
				totalNum: 0,
			}
		},

		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.getGasOutletBaseList()
		},

		methods: {

			handleCurrentChange: function(val) {
				that.params.pageIndex = val;
				that.getGasOutletBaseList();
			},

			deleteThis(item) {
				let noticeText = "是否删除此设备"
				
				this.$alert(noticeText, '', {
					confirmButtonText: '确定',
					callback: action => {
						if (action == "confirm") {
							that.ajax({
								url: '/onlineMonitor/delete?ticketId=' + that.params.ticketId,
								data: {
									outletId: item.id
								},
								contentType: 'application/x-www-form-urlencoded',
								success: function(result) {
									if (result.data) {
										that.params.pageIndex = 1;
										that.getGasOutletBaseList();
									}
								},
							})
						}
					}
				});
			},

			getGasOutletBaseList() {
				that.ajax({
					url: '/onlineMonitor/pageOnlineMonitor?pageIndex=' + that.params.pageIndex + "&pageSize=" +
						that.params.pageSize + "&ticketId=" + that.$store.state.token,
					data: JSON.stringify({
						ticketId: that.params.ticketId,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data.records
							that.totalNum = result.data.total
						}
					},
				})
			},


		}
	}
</script>


<style scoped>
	.display_Flex_Bet {
		display: flex;
		justify-content: space-between;
	}
</style>